<template>
  <div class="toolBar">
    <div class="block">
     <el-input
            style="width: 200px"
            prefix-icon="el-icon-search"
            clearable
            v-model="searchInput"
            placeholder="搜索IP..."
          >
          </el-input
        >
      <p style="margin-right:5px;display: inline;font-size:15px">登录时间段:</p><el-date-picker
        class="blockStart"
        v-model="pickerDate.StartTime"
        type="datetime"
        placeholder="登录时间"
        :picker-options="pickerOptions"
        :clearable="false"
        @change="changePickerDate(pickerDate.StartTime, 'StartTime')"
      >
      </el-date-picker>
      <p style="margin-right:5px;display: inline;font-size:15px">至</p><el-date-picker
        class="blockEnd"
        v-model="pickerDate.EndTime"
        type="datetime"
        placeholder="结束日期"
        :picker-options="pickerOptions"
        :clearable="false"
        @change="changePickerDate(pickerDate.EndTime, 'EndTime')"
      >
      </el-date-picker>
      <span v-show="!inputFilter.show">
        <i style="font-style: normal; font-size: 14px" v-show="isShowfre"
          >请选择时间间隔:</i
        ><el-select
          v-model="fre"
          v-show="isShowfre"
          @change="IntervalOperaFn"
          clearable
          placeholder="请选择时间间隔"
        >
          <el-option
            v-for="item in IntervalOption"
            :key="item.value"
            :label="item.label"
            :value="item"
          >
          </el-option>
        </el-select>
      </span>
      <span>
        <el-button
          :disabled="toolBarDisabled"
          type="primary"
          size="medium"
          plain
          @click="sendPickerDate"
        >
          查询
        </el-button>
      </span>
    </div>
    <div class="tableTool">
            <el-tooltip content="筛选列" placement="top" effect="dark">
                <el-popover
                    placement="left-start"
                    width="100"
                    trigger="click">
                    <el-checkbox-group 
                        id="myCheckboxGroup"
                        v-model="checkedArr" 
                        @change="handleChange">
                        <el-checkbox v-for="item in tableColumns"
                            :label="item.label"
                            :key="item.prop" 
                            style="display:block;">
                            {{item.label}}
                        </el-checkbox>
                    </el-checkbox-group>
                    <el-button
                        class="btnLie"
                        icon="el-icon-jk-lie"
                        slot="reference">
                    </el-button>
                </el-popover>
            </el-tooltip>
            <el-tooltip content="导出" placement="top" effect="dark">
                <download-excel
                    class="downExcel"
                    type="xls"
                    :data="tableData"
                    :fields="tableDataFields"
                    :name="fileName">
                    <el-button
                        class="btnExport"
                        icon="el-icon-jk-export"
                        @click="handleExport"
                        >
                    </el-button>
                </download-excel>
            </el-tooltip>
        </div>
  </div>
</template>

<script>
import bus from "common/bus.js";
import moment from 'moment'
export default {
  props: [
    "tableColumns",
    "tableData",
    "tableDataFields",
    "operaOption",
    "toolDisabled",
    "isShowfre",
    "fileName",
    'reportSearchIP',

  ],
  computed: {},
  data() {
    return {
       searchInput: '',
      level: [
        { value: 3, label: "紧急" },
        { value: 2, label: "普通" },
        { value: 1, label: "提醒" },
      ],
      IntervalOption: [
        {
          value: "1",
          label: "1分钟",
        },
        {
          value: "5",
          label: "5分钟",
        },
        {
          value: "10",
          label: "10分钟",
        },
        {
          value: "30",
          label: "30分钟",
        },
        {
          value: "60",
          label: "60分钟",
        },
        {
          value: "120",
          label: "120分钟",
        },
      ],
      loading:false,
	  inputFilterOptions:[],
      changeLie: "",
      selectOpera: {},
      fre: {
        value: 1,
        label: "1分钟",
      },
      inputFilter: {
        filterKey: "",
        data: "",
        show: false,
        placeholder: "",
		options:[]
      },
      checkedArr: [],
      toolBarDisabled: false,
      pickerDateTime: {},
      // thisTime:,
      pickerDate: {
        // 更改开始时间
        StartTime: new Date(moment().subtract(30, "days").format("YYYY-MM-DD HH:mm:ss")),
        // StartTime:'',
        EndTime: new Date(),
      },
      //禁止选未来时间
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > Date.now();
        },
      },
      pickerOptionLase: {
        disabledDate: (time) => {
          return time.getTime() > Date.now()&&time.getTime()&&time.getTime() < this.pickerDate.StartTime;
        },
      },
    };
  },
  created() {
    this.initOperaDate();
    this.initPickerDate();
    this.initIntervalDate();
    this.initStartTIme();
	// this.initinputFilter();
  },
  
  computed: {},
  methods: {
    initOperaDate() {
      this.selectOpera = this.operaOption[0];

      this.$emit("selectOpera", this.selectOpera);
    },
    initStartTIme() {
      this.pickerDate.StartTime = new Date(moment().subtract(30, "days").format("YYYY-MM-DD HH:mm:ss"));
      this.pickerDate.EndTime = new Date();
    },
    initPickerDate() {
      let _json = {};

      for (const key in this.pickerDate) {
        const element = this.pickerDate[key];
        _json[key] = this.formatDate(element);
      }

      this.$emit("pickerDate", _json);
    },
    initIntervalDate() {
      this.fre = this.IntervalOption[0];

      this.$emit("intervalOpera", this.fre);
    },
	// initinputFilter() {
  //   console.log(this.operaOption[2])
	// 	this.inputFilterOptions = this.operaOption[2].filter.options;
	// 	this.$emit("selectOpera", this.selectOpera);
	// },
    updateCheckedArr() {
      this.tableColumns.forEach((element, index) => {
        if (element.isShow) {
          this.checkedArr.push(element.label);
        }
      });
    },
    selectOperaFn(item) {
      this.$emit("selectOpera", item);
      // this.sendPickerDate()
    },
    IntervalOperaFn(item) {
      
      this.$emit("intervalOpera", item);
      // this.sendPickerDate()
    },
    handleChange(val) {
      this.changeLie = val;
      this.$emit("changeLie", val);
    },
    // 选择时间
    changePickerDate(date, key) {
      this.pickerDateTime = {};

      this.pickerDateTime[key] = this.formatDate(date);

      this.$emit("pickerDate", this.pickerDateTime);
      // this.sendPickerDate()
    },
    otherInputFilter(item){
      this.$emit('ChangeFileSystemHistory',item)
    },
    sendPickerDate() {
      this.$emit("goSearch");
      // console.log('but',this.toolBarDisabled);
    },
    // 格式化时间
    formatDate(date) {
      let _time = "";

      if (date) {
        let _year = date.getFullYear().toString();
        let _month = (date.getMonth() + 1).toString().padStart(2, "0");
        let _day = date.getDate().toString().padStart(2, "0");
        let _hour = date.getHours().toString().padStart(2, "0");
        let _minute = date.getMinutes().toString().padStart(2, "0");
        let _second = date.getSeconds().toString().padStart(2, "0");

        _time =
          _year +
          "-" +
          _month +
          "-" +
          _day +
          " " +
          _hour +
          ":" +
          _minute +
          ":" +
          _second;
      }
      return _time;
    },
    handleExport() {
      let _data = {
        type: this.selectOpera.value,
      };
      this.$emit("exportData", _data);
      // location.href = _url;
    },
  },
  watch: {
    searchInput(){
			
			this.$emit('handleSearch', this.searchInput);
		},
    tableColumns: function () {
      this.updateCheckedArr();
    },
    selectOpera: async function (newVal, oldVal) {
      if (newVal.filter == "") {
        this.inputFilter = {
          filterKey: "",
          data: "",
          show: false,
          placeholder: "",
        };
      } else {
        this.inputFilter.show = true;
       
        // 后期可能有多级
        for (const key in newVal.filter) {
          if (newVal.filter.hasOwnProperty(key)) {
            const element = newVal.filter[key];
            this.inputFilter.filterKey = key;
            this.inputFilter.placeholder = element;


            // //2021 10 22
            // const element = newVal.filter[key];
            // this.inputFilter[key] = element
          }
        }
        // this.inputFilter.options = newVal.filter.options
        //  this.inputFilterOptions.data = await this.operaOption[2].filter.data
        // this.inputFilterOptions.options = await this.operaOption[2].filter.options
        // this.inputFilterOptions.mounted_on = await this.operaOption[2].filter.mounted_on

        // console.log(this.operaOption[2], this.inputFilterOptions, this.inputFilter)

		
      }
    },
    "inputFilter.data": function (newVal, oldVal) {
      if (this.inputFilter.filterKey) {
        let _data = {};
        _data[this.inputFilter.filterKey] = newVal;

        this.$emit("inputFilter", _data);
      }
    },
    toolDisabled: {
      handler(newValue, oldValue) {
        this.toolBarDisabled = newValue;
      },
      deep: true,
    },
  },
};
</script>

<style scoped>
.toolBar {
  overflow: hidden;
  margin-bottom: 14px;
}
.toolBar .block{
  margin-left: 10px
}
.toolBar .searchBox {
  float: left;
}
.toolBar .searchBox .searchInput {
  display: inline-block;
  width: 240px;
  margin-right: 10px;
}
.toolBar .searchBox .selectLevel,
.selectNodeType {
  display: inline-block;
  width: 150px;
  margin-right: 10px;
}
.toolBar .block {
  float: left;
}
.toolBar .block > * {
  margin-right: 10px;
}
.toolBar .block .selectOpera,
.inputFilter {
  width: 150px;
}
.toolBar /deep/ .el-popper[x-placement^="bottom"] {
  margin-top: 63px;
}
.toolBar .tableTool {
  float: right;
}
.toolBar .tableTool .btnLie {
  margin-right: 10px;
}
.toolBar .tableTool .downExcel {
  display: inline-block;
}
#myCheckboxGroup /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #606266;
}
#myCheckboxGroup /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #5fb878;
  border-color: #5fb878;
}
#myCheckboxGroup /deep/ .el-checkbox {
  margin-bottom: 8px;
}
.selectOpera {
  margin-bottom: 10px;
}
</style>
